<template>
  <div>
    <SearchForm
        @search="onSearch"
        @reset="onReset"
        :search-list="searchList" 
        :search-params="searchParams">
    </SearchForm>

    <div class="table-layout">
      <el-card shadow="never">
        <div class="table-handle">
          <el-button type="primary" size="mini" icon="el-icon-plus" @click="onAdd">新增规格</el-button>
        </div>
        <div class="table-box">
          <el-table
              size="large"
              stripe
              border
              v-loading="loading"
              max-height="500px"
              :data="tableData"
              row-key="id"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(255, 255, 255, 0.8)"
              @selection-change="onSelect"
          >
            
            <el-table-column prop="product_name" label="商品名称" min-width="200"/>
            <el-table-column prop="spec_name" label="规格名称" width="150"/>
            <el-table-column prop="spec_values" label="规格值" min-width="300">
              <template slot-scope="scope">
                <div v-if="scope.row.spec_values">
                  <el-tag 
                    v-for="value in JSON.parse(scope.row.spec_values)" 
                    :key="value"
                    size="mini"
                    style="margin-right: 5px; margin-bottom: 5px;"
                  >
                    {{ value }}
                  </el-tag>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="sort" label="排序" width="80"/>
            <el-table-column prop="status" label="状态" width="100">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.status === 1" type="success">启用</el-tag>
                <el-tag v-else type="info">禁用</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" min-width="200">
              <template slot-scope="scope">
                <el-button type="text" @click="onEdit(scope.row)">编辑</el-button>
                <el-button type="text" @click="onManageValues(scope.row)">管理规格值</el-button>
                <el-button type="text" style="color: #F82222" @click="onDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
      <div class="page-box">
        <el-pagination
            background
            :current-page="pageNo"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalSize"
            @size-change="changePageSize"
            @current-change="changePageNo"
        />
      </div>
    </div>
    
    <Add ref="addFormRef" @get-page="initData" />
    
    <!-- 规格值管理弹窗 -->
    <el-dialog
        title="管理规格值"
        :visible.sync="valuesDialog"
        width="600px"
        append-to-body
    >
      <div class="values-container">
        <div class="values-header">
          <h4>{{ currentSpec.spec_name }}</h4>
          <el-button type="primary" size="mini" @click="addValue">添加规格值</el-button>
        </div>
        
        <div class="values-list">
          <el-tag
            v-for="(value, index) in specValues"
            :key="index"
            closable
            @close="removeValue(index)"
            style="margin-right: 10px; margin-bottom: 10px; font-size: 14px; padding: 8px 12px;"
          >
            {{ value }}
          </el-tag>
        </div>
        
        <div class="values-actions">
          <el-button @click="valuesDialog = false">取消</el-button>
          <el-button type="primary" @click="saveValues">保存</el-button>
        </div>
      </div>
    </el-dialog>
    
    <!-- 添加规格值弹窗 -->
    <el-dialog
        title="添加规格值"
        :visible.sync="addValueDialog"
        width="400px"
        append-to-body
    >
      <el-input
        v-model="newValue"
        placeholder="请输入规格值"
        @keyup.enter.native="confirmAddValue"
      />
      <div slot="footer" class="dialog-footer">
        <el-button @click="addValueDialog = false">取消</el-button>
        <el-button type="primary" @click="confirmAddValue">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import crud from "@/mixins/crud";
import { http } from "@/api";
import Add from "./add";

export default {
  name: "ProductSpecIndex",
  components: {
    Add
  },
  mixins: [crud],
  data() {
    return {
      request: http.productSpec,
      searchList: [
        {
          label: '商品名称',
          prop: 'product_name',
          name: 'input',
          placeholder: '请输入商品名称'
        },
        {
          label: '规格名称',
          prop: 'spec_name',
          name: 'input',
          placeholder: '请输入规格名称'
        },
        {
          label: '状态',
          prop: 'status',
          name: 'select',
          placeholder: '请选择状态',
          options: [
            { value: 1, label: '启用' },
            { value: 0, label: '禁用' }
          ]
        }
      ],
      searchParams: {
        product_name: '',
        spec_name: '',
        status: ''
      },
      defaultParams: {},
      tableData: [],
      valuesDialog: false,
      addValueDialog: false,
      currentSpec: {},
      specValues: [],
      newValue: ''
    }
  },
  methods: {
    onManageValues(row) {
      this.currentSpec = row;
      this.specValues = row.spec_values ? JSON.parse(row.spec_values) : [];
      this.valuesDialog = true;
    },
    
    addValue() {
      this.newValue = '';
      this.addValueDialog = true;
    },
    
    confirmAddValue() {
      if (this.newValue.trim() && !this.specValues.includes(this.newValue.trim())) {
        this.specValues.push(this.newValue.trim());
        this.addValueDialog = false;
      } else if (this.specValues.includes(this.newValue.trim())) {
        this.$message.warning('该规格值已存在');
      }
    },
    
    removeValue(index) {
      this.specValues.splice(index, 1);
    },
    
    saveValues() {
      const specData = {
        ...this.currentSpec,
        spec_values: JSON.stringify(this.specValues)
      };
      
      http.productSpec.update(this.currentSpec.id, specData).then(() => {
        this.$message.success('规格值保存成功');
        this.valuesDialog = false;
        this.initData();
      }).catch(() => {
        this.$message.error('规格值保存失败');
      });
    }
  }
}
</script>

<style scoped lang="scss">
.table-layout {
  margin-top: 20px;
}
.table-handle {
  margin-bottom: 20px;
}
.page-box {
  margin-top: 20px;
  text-align: right;
}

.values-container {
  .values-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    
    h4 {
      margin: 0;
      color: #303133;
    }
  }
  
  .values-list {
    min-height: 100px;
    padding: 15px;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    margin-bottom: 20px;
  }
  
  .values-actions {
    text-align: right;
  }
}
</style> 